<template>
<!--  商品信息页面-->
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item prop="id">
          <el-input v-model="dataForm.id" placeholder="商品编号" clearable></el-input>
        </el-form-item>
        <el-form-item prop="productName">
          <el-input v-model="dataForm.productName" placeholder="商品名称" clearable filterable></el-input>
        </el-form-item>
        <el-form-item prop="groupName">
          <ComSelectPage ref="newPageSelect" @selectPageChange="e=>dataForm.groupName=e"
        :getUrl="{
        url:'/api/productGroup/page',
        method:'get',
        params:{page: 1,limit: 10,total: 0},
      }" clearable :defaultValue="dataForm.groupName" placeholder="请选择分类" selectLabel="groupName" selectValue="groupName"></ComSelectPage>
        </el-form-item>
        <el-form-item prop="showState">
          <ren-select v-model="dataForm.showState" dict-type="show_state" placeholder="上架状态"></ren-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('api:product:save')" type="primary" @click="addOrUpdateHandle()">
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('api:product:delete')" type="danger" @click="deleteHandle()">
            删除
          </el-button>
        </el-form-item>
      </el-form>
      <div style="color: #979997;padding: 0 0 20px;">
        维护提醒：维护好商品后，请再维护规格，否则将导致商品无法在客户端显示，导致用户无法购买该商品。
      </div>
      <el-table v-loading="dataListLoading" :data="dataList" stripe highlight-current-row
                @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
                style="width: 100%;">

        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="商品编号" header-align="center" align="center" width="90"></el-table-column>
        <el-table-column prop="imgUrl" label="商品图片" header-align="center" align="center" width="100">
          <template slot-scope="{row,$index}">
            <!-- 图片展示 -->
            <el-popover trigger="click" placement="top" popper-class="popper">
              <img v-if="row.imgUrl" :src="row.imgUrl">
              <el-image v-if="row.imgUrl" slot="reference" :src="row.imgUrl">
                <div slot="error">
                  暂无图片
                </div>
              </el-image>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="groupName" label="商品分类" header-align="center" align="center" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="productType" label="商品类型" header-align="center" align="center" width="100" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div >
              {{ $getDictLabel("product_type", row.productType) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="productDesc" label="商品介绍" header-align="center" align="center" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="showState" label="上架状态" header-align="center" align="center" sortable width="120" show-overflow-tooltip>
          <template slot-scope="{row,$index}">
            <el-dropdown trigger="click" @command="dropdownCk">
              <div class="el-dropdown-link demonstration" >
                <el-tag v-if="row.showState === 1" size="small" type="success">
                  {{ $getDictLabel("show_state", row.showState) }}
                </el-tag>
                <el-tag v-else size="small" type="info">{{
                    $getDictLabel("show_state", row.showState)
                  }}
                </el-tag>
              </div>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item  v-for="(item,index) in getDictDataList('show_state')" :key="index" :command="row.id+'?'+ item.dictValue">{{ $getDictLabel("show_state", item.dictValue) }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
<!--        <el-table-column prop="single" label="是否加入购物车" header-align="center" align="center" sortable width="150" show-overflow-tooltip>-->
<!--          <template slot-scope="{row}">-->
<!--            <div class="flex_jufy_center">-->
<!--              {{ $getDictLabel("single", row.single) }}-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="details" label="商品详情" header-align="center" align="center" width="100" show-overflow-tooltip>
          <template slot-scope="{row}">
            <el-tag size="small" type="primary" style="cursor: pointer;" @click="showRichText(row.details)" v-if="row.details && row.details.length>30">点击查看</el-tag>
            <div v-else>暂无详情</div>
          </template>
        </el-table-column>
<!--        <el-table-column prop="serviceList" label="服务内容" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>-->
        <el-table-column prop="price" label="起购价" header-align="center" align="center" width="" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div>{{formatNumber(row.price)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="marketPrice" label="划线价" header-align="center" align="center" width="" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div>{{formatNumber(row.marketPrice)}}</div>
          </template>
        </el-table-column>
<!--        <el-table-column prop="stock" label="商品库存" header-align="center" align="center" width="" show-overflow-tooltip></el-table-column>-->
        <el-table-column prop="sold" label="已售数量" header-align="center" align="center" width="" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div>{{formatNumber(row.sold,true)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" header-align="center" align="center" sortable width="90" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createDate" label="创建日期" header-align="center" align="center" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="240" show-overflow-tooltip>
          <template slot-scope="{row,$index}">
            <div class="flex_wrap flex_row_reverse">
              <el-dropdown trigger="click"  @command="operateDropdownCk">
                <div class="el-dropdown-link demonstration" >
                  <el-link type="primary"><i class="el-icon-more"></i></el-link>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                      :command="{title:'删除',item:row.id}"
                      v-if="$hasPermission('api:product:delete')"
                  >删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-link v-if="$hasPermission('api:productSpecs:info')"  type="primary"
                         @click="getSpecInfo(row.id)">编辑规格
              </el-link>
              <el-link v-if="$hasPermission('api:productAlbum:info')" type="primary"
                         @click="getImgInfo(row.id)">编辑图册
              </el-link>
              <el-link v-if="$hasPermission('api:product:update')" type="primary"
                         @click="addOrUpdateHandle(row.id)">修改
              </el-link>
<!--              <el-link v-if="$hasPermission('api:product:delete')" type="primary"-->
<!--                         @click="deleteHandle(row.id)">删除-->
<!--              </el-link>-->
            </div>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                     layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <!--富文本显示-->
      <com-rich-text :visible.sync="showRich" :content="content"></com-rich-text>
    </div>

  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './productAddOrUpdate.vue'
import {formatNumber, getDictDataList} from "@/utils";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/product/page',
        getDataListIsPage: true,
        deleteURL: '/api/product',
        deleteIsBatch: true
      },
      showRich:false,                    //富文本显示
      content:"",                        //富文本内容
      dataForm: {
        id: '',
        imgUrl: '',             //商品的图片路径或链接
        groupName: '',          //商品所属的分类或类别
        showState: '',          //上架状态，0不展示，1展示
        productType: '',        //商品类型
        productName: '',        //商品的名称
        productDesc: '',        //商品的描述或介绍
        price: '',              //商品的价格
        marketPrice: '',        //商品的划线价格
        stock: '',              //商品的库存数量
        sold: '',               //商品的已售数量
        sort: '',               //用来显示商品在列表中的顺序
        details:'',             //商品的详细介绍
        // serviceList:'',         //服务内容
        single:''               //是否允许单买
      },
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
  },
  methods: {
    formatNumber,
    getDictDataList,
    //富文本显示
    showRichText(content){
      this.showRich=true;
      this.content= content;
    },
    /*查看商品相册*/
    getImgInfo(id){
      this.$router.push({path: `/service-productAlbum`,query:{productId:id,time:new Date().getTime()}})
    },
    /*查看商品规格*/
    getSpecInfo(id){
      this.$router.push({path: `/service-goods-spec`,query:{productId:id,time:new Date().getTime()}})
    },
    //快速修改是否隐藏状态
    dropdownCk(e){
      const value = e.split('?')
      const item = {id:  value[0], showState: Number(value[1])}
      this.$http.put('/api/product', item).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.getDataList()
          }
        })
      }).catch(() => {
      })
    },
    //操作栏下拉框选择
    operateDropdownCk(command) {
      if(command['title']==='删除'){
        this.deleteHandle(command['item'])
      }
    }
  }
}
</script>
<style lang="scss" scoped>
img {
  height: 400px;
}
.el-dropdown-link {
  cursor: pointer;
}
.demonstration {
  display: block;
}
.el-button{
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
